<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<style type="text/css">
	*{padding:0px;margin:0px;}
	#dvs{width:400px;height:400px;border:solid 1px blue;float:left;position:absolute;left:0px;}
	#dvss{width:400px;height:400px;border:solid 1px blue;float:left;position:absolute;left:400px;}
	#d{width:400px;height:400px;border:solid 1px blue;float:left;position:absolute;left:400px;overflow:hidden;}
	#dv{width:400px;height:400px;border:solid 1px blue;float:left;position:absolute;left:803px;}
	.w{
		width:100%;
		height:100%;
		position:absolute;
	}
	.a{
		width:20px;
		height:20px;
		display:block;
		background:yellow;
		position:absolute;
		float:right;
		left:708px;
		top:410px;
	}
	.b{
		width:20px;
		height:20px;
		display:block;
		background:yellow;
		position:absolute;
		float:right;
		left:728px;
		top:410px;
	}
	.c{
		width:20px;
		height:20px;
		display:block;
		background:yellow;
		position:absolute;
		float:right;
		left:748px;
		top:410px;
	}

	</style>
</head>
<body>
	<div id = 'd'>
	<div id ='dvs'><img src="./images/0a2e815e62207be182acd6e54579d9dc.jpg" alt="" id='img' class = 'w'></div>
	<div id = 'dvss'><img src="./images/0c0284bb404ac7213ef8cd1acdbfdc2f.jpg" alt=""   id='imgs' class = 'w'></div>
	
	<div id = 'dv'><img src="./images/1cf23b258b736de278f8f1ea4f49a9c5.jpg" alt="" id='imges' class = 'w'></div>
	</div>
	<button class= 'a'>1</button>
	<button class= 'b'>2</button>
	<button class= 'c'>3</button>
	<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
	<script type="text/javascript">
	var dvs = document.getElementById('dvs');
	var img = document.getElementById('img');
	var imgs = document.getElementById('imgs');
	var imges = document.getElementById('imges');
	var into = null;
	var imge = document.getElementsByName('img');
	var but = document.getElementsByTagName('button');
	var d = document.getElementById('d');
	var l = dvs.offsetLeft;
	var n = dvss.offsetLeft;
	var b = dv.offsetLeft;
	var s = 0;
	var v = 0;
	var ss = 0;
	var sl = 0;
	var vl = 0;
	var ssl = 0;
	function inter()
	{


	into = setInterval(function(){
		 s = dvs.offsetLeft;
		 v = dvss.offsetLeft;
		 ss = dv.offsetLeft;


		 sl = s-3;
		 vl = v-3;
		 ssl  = ss-3;


	
		// console.log(s,v,ss);

		dvs.style.left = sl +'px';
		dvss.style.left = vl +'px' ;
		dv.style.left = ssl +'px';
		if(ss <=0){
			// 
		dvs.style.left = l +'px';
		dvss.style.left = n +'px' ;
		dv.style.left = b +'px';
		}
		var dl = d.offsetLeft;

		var dvsl = dvs.offsetLeft;
		dvssl = dvss.offsetLeft;
		console.log(dl);

// if()
	
	},100)
}
	
	but[0].onmousemove= function(){
		dvs.style.left = l +'px';
		dvss.style.left = n +'px' ;
		dv.style.left = b +'px';
		clearInterval(into);
	}
	but[0].onmouseout = function()
	{
		inter();
	}
	but[1].onmousemove = function()
	{
		dvs.style.left = l- 400 +'px';
		dvss.style.left = n- 400+'px' ;
		dv.style.left = b- 400 +'px';
		clearInterval(into);
	}

	but[1].onmouseout = function()
	{
		inter();
	}	
	but[2].onmousemove = function()
	{
		dvs.style.left = l- 800 +'px';
		dvss.style.left = n- 800+'px' ;
		dv.style.left = b- 800 +'px';
		clearInterval(into);
	}
	but[2].onmouseout = function()
	{
		inter();
	}
inter();
	d.onmouseover = function()
	{
		clearInterval(into);
	}
	d.onmouseout = function()
	{
		inter()
	}

	var dl = d.offsetLeft;
	// console.log(dl);
	</script>
</body>
</html>